import React from 'react';
import { Card , Tag } from 'antd-mobile';
import { Flex, Typography } from 'antd/lib';

const { Text } = Typography;

interface PointsCardProps {
  points: number;
}

const PointsCard: React.FC<PointsCardProps> = ({
  points,
}) => {
  let tagText = ''
  if(points>150){
    tagText='熟练小明星'
  }else if(points>50&&points<151){
    tagText='成长小能手'
  }else{
    tagText = '萌芽小达人'
  }

  return (
    <div
      style={{
        marginBottom:'15px'
      }}
    >
      <Flex align="center" justify="between">
        <Flex align="center" style={{
          backgroundColor:"#edfff9",
          borderRadius:'20px',
          padding:'0 10px'
        }}>
          <div
            style={{
              fontSize: '18px',
              color: '#ffd700',
              marginRight: '8px'
            }}
          >
            ★
          </div>
          <Text
            strong
            style={{
              fontSize: '18px',
              color: '#1eb7d8',
              whiteSpace: 'nowrap',
              maxWidth: '150px',
              overflow: 'hidden',
              textOverflow: 'ellipsis'
            }}
          >
            {points} 积分
          </Text>
        </Flex>
        
        <Tag
          style={{
            background: '#ffffff',
            border: 'none',
            padding: '6px 8px',
            fontSize: '18px',
            color: '#ffd700',
            fontWeight:'600px'
          }}
        >
          <Flex align="center" gap="4px">
            <span style={{
              fontWeight:'600px'
            }}>{tagText}</span>
            🏆
          </Flex>
        </Tag>
      </Flex>
    </div>
  );
};

export default PointsCard;